<template>
  <d2-container>
    <el-table :data="tableData" style="width: 100%" stripe size="mini" v-loading="loading">
      <el-table-column prop="areaName" label="小区名称"></el-table-column>
      <el-table-column prop="areaAddress" label="小区地址"></el-table-column>
      <el-table-column prop="areaManager" label="管理员"></el-table-column>
      <el-table-column prop="areaTel" label="联系方式"></el-table-column>
      <el-table-column prop="groupName" label="所属机构"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="onAdd">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" plain @click="onUpdate(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.size"
        :current-page="page.index"
        @current-change="onPageChange"
      ></el-pagination>
    </template>
    <dialogAreaModify ref="dialogAreaModify" @change="onAreaChanged"></dialogAreaModify>
  </d2-container>
</template>
<script>

import { mapActions } from "vuex";
import { PAGE_SIZE } from "@/const"; 
export default {
  mounted() {
    this.bindData();
    // this.loading = true
    // this.getAreaList().then(result => {
    //   //服务器请求成功,Result中存放的是请求的结果
    //   this.tableData = result;//把结果赋值给tableData
    //   this.loading = false
    // })
  },
  data() {
    return {
      loading: false,
      tableData: [],
      page: {
        index: 1, //默认当前页是第一页
        total: 0, //从服务器 获取的总数据
        size: PAGE_SIZE //每页数据数
      }
    };
  },
  methods: {
    ...mapActions("pms/base.area", ["getAreaPage"]),
    onAdd() {
      this.$refs.dialogAreaModify.showDialog();
    },
    onUpdate(row) {
      this.$refs.dialogAreaModify.showDialog(row);
    },
    onAreaChanged() {
      //当数据发生变化,数据重新加载 刷新页面
      this.bindData();
    },
    //数据
    bindData() {
      this.loading = true;
      this.getAreaPage({ page: this.page }).then(result => {
        console.log(result);
        this.tableData = result.data;
        this.page = result.page;
        this.loading = false;
      });
    },
    onPageChange(index) {
      //console.log(index);
      //当当前页切换时,修改page对象,然后重新绑定数据
      this.page.index = index;
      this.bindData();
    }
  },
  components: {
    dialogAreaModify: () => import("./dialog-area-modify")
  }
};
</script>